<template>
  <div v-loading="loading" class="noPad" style="overflow: auto">
    <el-tabs v-model="activeName" type="card" @tab-click="clickMenu">
      <el-tab-pane v-for="(item, key) in childMenuTabs" :key="key" :lazy="true" :label="$t(item.menuName)" :name="item.menuName">
        <component :is="menuPath" v-if="item.flag" :flow-id="wfNodeId" :node-type="item.nodeType" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getAsyncComponent } from '@/utils'

export default {
  name: 'WfConfigNodeIndex',
  data() {
    return {
      // 加载
      loading: true,
      // 选中页签名称
      activeName: '首轮投资',
      // 子页签
      childMenuTabs: [],
      // 组件地址
      menuPath: '',
      menus: [
        {
          'menuName': '首轮投资',
          'nodeType': 'first',
          'component': 'act/busFlow/wfConfigNodeList'
        },
        {
          'menuName': '新增投资',
          'nodeType': 'new',
          'component': 'act/busFlow/wfConfigNodeList'
        }
      ],
      wfNodeId: undefined
    }
  },
  mounted() {
  },
  methods: {
    init(id) {
      if (id) {
        this.wfNodeId = id
        this.listLoad(id)
      }
    },
    listLoad() {
      this.loading = true
      this.childMenuTabs = this.menus
      this.activeName = this.childMenuTabs[0].menuName
      this.clickMenu(this.childMenuTabs[0])
      this.loading = false
    },
    clickMenu(tab) {
      this.childMenuTabs && this.childMenuTabs.forEach(item => {
        if (item.menuName === tab.menuName || item.menuName === tab.name) {
          this.$nextTick(() => {
            this.$set(item, 'flag', true)
            this.importFormPath(item.component)
          })
        } else {
          this.$set(item, 'flag', false)
        }
      })
    },
    // 引入组件
    importFormPath(menuPath) {
      if (menuPath) {
        this.menuPath = getAsyncComponent('@/views/' + menuPath)
      } else {
        const error = 'error/404'
        this.importFormPath(error)
      }
    }

  }
}
</script>
